<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-2"
        ><el-icon><ElementPlus /></el-icon
      ></el-icon>
      OSSR后台管理
    </span>
    <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
      <Fold v-if="$store.state.asideWidth == '250px'" />
      <Expand v-else />
    </el-icon>
    <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
      <el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
    </el-tooltip>
    <div class="f-right mr-8">
      <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
        <el-icon class="icon-btn" @click="toggle">
          <FullScreen v-if="!isFullscreen" />
          <Aim v-else />
        </el-icon>
      </el-tooltip>
      <el-dropdown class="f-right" @command="handleCommand">
        <span class="el-dropdown-link f-right">
          <el-avatar :size="25" :src="$store.state.user.avatar" class="mr-2" />
          <span>{{ $store.state.user.username }}</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="rePassWord">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <FormDrawer
    ref="formDrawer"
    title="修改密码"
    @submit="submitForm(ruleFormRef)"
    destroyOnClose
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="旧密码" prop="oldpassword">
        <el-input
          v-model="ruleForm.oldpassword"
          autocomplete="off"
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          autocomplete="off"
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input
          v-model="ruleForm.repassword"
          autocomplete="off"
          placeholder="请再次输入新密码"
        />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>
<script setup lang="ts">
import { useFullscreen } from "@vueuse/core";
import FormDrawer from "~/components/FormDrawer.vue";
import { useRepassword, useLogout } from "~/composables/useManager";
// 修改密码抽屉
const {
  // 全屏
  isFullscreen,
  // 切换全屏
  toggle,
} = useFullscreen();
const {
  ruleFormRef,
  ruleForm,
  formDrawer,
  rules,
  submitForm,
  openRepasswordForm,
} = useRepassword();
const { handlelogout } = useLogout();
// 刷新
function handleRefresh() {
  location.reload();
}
// 监听Command事件
function handleCommand(val) {
  switch (val) {
    case "logout":
      handlelogout();
      break;
    case "rePassWord":
      openRepasswordForm();
      break;
    default:
      break;
  }
}
</script>

<style scoped lang="scss">
.f-header {
  @apply flex bg-indigo-700 text-light-50 fixed top-0 left-0 right-0 items-center;
  height: 60px;
}
.logo {
  width: 250px;
  @apply flex items-center justify-center text-xl font-thin;
}
.icon-btn {
  @apply flex items-center justify-center;
  width: 42px;
  height: 4px;
  cursor: pointer;
}
.f-right {
  height: 64px;
  @apply flex ml-auto items-center justify-center text-light-50;
}
.demo-drawer__footer {
  position: absolute;
  bottom: 40px;
  left: 40px;
}
</style>
